<template>
    <view class="login-container">
        <view class="logo">
            <image src="/static/images/logo.png" mode="aspectFit"></image>
        </view>
        <view class="title">共享陪护床</view>
        <view class="subtitle">让陪护更舒适</view>
        
        <view class="login-box">
            <button class="login-btn" 
                    type="primary" 
                    open-type="getUserInfo" 
                    @getuserinfo="handleLogin">
                微信一键登录
            </button>
            
            <view class="agreement">
                登录即代表同意
                <text class="link" @tap="showAgreement">《用户服务协议》</text>
            </view>
        </view>
    </view>
</template>

<script>
import { wxLogin } from '@/api/user'

export default {
    data() {
        return {
            loading: false
        }
    },
    methods: {
        async handleLogin(e) {
            if (this.loading) return
            this.loading = true
            
            try {
                // 获取微信登录code
                const { code } = await uni.login()
                
                // 获取用户信息
                if (e.detail.errMsg === 'getUserInfo:ok') {
                    const { userInfo } = e.detail
                    
                    // 调用登录接口
                    const res = await wxLogin({
                        code,
                        userInfo
                    })
                    
                    // 保存token
                    uni.setStorageSync('token', res.token)
                    
                    // 跳转到首页
                    uni.switchTab({
                        url: '/pages/index/index'
                    })
                }
            } catch (error) {
                uni.showToast({
                    title: '登录失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        },
        
        showAgreement() {
            uni.navigateTo({
                url: '/pages/agreement/index'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.login-container {
    min-height: 100vh;
    padding: 60rpx;
    background-color: #fff;
    
    .logo {
        margin: 60rpx auto;
        width: 200rpx;
        height: 200rpx;
        
        image {
            width: 100%;
            height: 100%;
        }
    }
    
    .title {
        font-size: 48rpx;
        font-weight: bold;
        text-align: center;
        color: #333;
        margin-bottom: 20rpx;
    }
    
    .subtitle {
        font-size: 28rpx;
        color: #666;
        text-align: center;
        margin-bottom: 80rpx;
    }
    
    .login-box {
        padding: 40rpx;
        
        .login-btn {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            background: #07c160;
            border-radius: 44rpx;
            font-size: 32rpx;
            color: #fff;
            text-align: center;
            margin-bottom: 40rpx;
        }
        
        .agreement {
            font-size: 24rpx;
            color: #999;
            text-align: center;
            
            .link {
                color: #07c160;
            }
        }
    }
}
</style> 